<style lang="scss" scoped>
.seachfilter {
    margin-top: 0.5rem;
    .seachfilter_top {
        display: flex;
        justify-content: center;
        .list {
            display: flex;
            align-items: center;
            padding: 0.3rem 0.5rem;
            background-color: #fff;
            margin: 0 0.2rem;
            font-size: 0.5rem;
            border-radius: 0.5rem;
            image {
                width: 0.8rem;
            }
            border: 1px solid #fa8c5100;
        }
        .listCative {
            background-color: #fa8c512d;
            border: 1px solid #fa8d51;
        }
    }
    .seachfilter_bottom {
        margin-top: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            font-size: 1rem;
            font-weight: 600;
        }
        .right {
            display: flex;
            justify-content: space-between;
            .list {
                padding: 0.3rem 0.7rem;
                background-color: #fff;
                margin-left: 0.5rem;
                border-radius: 0.5rem;
                display: flex;
                align-items: center;
                font-size: 0.8rem;
                image {
                    width: 0.8rem;
                    margin-right: 0.2rem;
                }
            }
        }
    }
}
</style>

<template>
    <view class="seachfilter">
        <view class="seachfilter_top">
            <view class="list" v-for="(item, index) in state.filter" :key="index" :class="state.listCative == index ? 'listCative' : ''" @click="tabs(index)">
                <image :src="item.url" mode="widthFix" />
                <text>{{ item.name }}</text>
            </view>
        </view>
        <view class="seachfilter_bottom">
            <view class="left">全部短剧</view>
            <view class="right">
                <view class="list">
                    <image src="../../static/images/index/theaterIcon.png" mode="widthFix" />
                    <view>全部剧场</view>
                </view>
                <view class="list">
                    <image src="../../static/images/index/order_2.png" mode="widthFix" />
                    <view>时间</view>
                </view>
                <view class="list">
                    <image src="../../static/images/index/order_2.png" mode="widthFix" />
                    <view>热度</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
const emit = defineEmits<{
    (event: "seachfiltertabs", value: string): void;
}>();
const state = reactive<{
    filter: Array;
    listCative: number;
}>({
    listCative: 0,
    filter: [
        {
            url: "../../static/images/index/inputIcon.png",
            name: "全部",
        },
        {
            url: "../../static/images/index/douyinIcon.png",
            name: "抖音",
        },
        {
            url: "../../static/images/index/kuaishouIcon.png",
            name: "快手",
        },
        {
            url: "../../static/images/index/weixinIcon.png",
            name: "视频号",
        },
        {
            url: "../../static/images/index/siyuIcon.png",
            name: "私域",
        },
    ],
});
const tabs = (index) => {
    state.listCative = index;
    emit("seachfiltertabs", index);
};
</script>
